<template>
<div class="背景">
  <div class="页眉">
  </div>
  <div>
    <el-row :gutter="16" type="flex" justify="center">
      <el-col :span="4">
        <div class="文本框" style="height: 800px;">
          <div class="标题">
            富吾财经
          </div>
          <br/>
          <el-menu router>
            <el-menu-item index="/" >
              <div class="小标题">
                富头条
              </div>
            </el-menu-item>
            <el-menu-item index="/Video" >
              <div class="小标题">
                视频
              </div>
            </el-menu-item>
            <el-menu-item index="/Live" >
              <div class="小标题">
                直播
              </div>
            </el-menu-item>
            <el-menu-item index="/" >
              <div class="小标题">
                资讯
              </div>
            </el-menu-item>
            <el-menu-item index="/CreationCenter" >
              <div class="小标题">
                富吾号
              </div>
            </el-menu-item>
            <el-menu-item index="/" >
              <div class="小标题">
                关于我们
              </div>
            </el-menu-item>
          </el-menu>
        </div>
      </el-col>
      <el-col :span="14">
        <div class="文本框">
          <div>
            <el-menu class="el-menu-demo" mode="horizontal" router="1">
              <el-menu-item index="/Video">返回</el-menu-item>
            </el-menu>
          </div>
          <div class="文本框">
            <el-row>
              <el-col :span="16">
                <div class="视频标题">
                  <el-col>
                    视频标题
                  </el-col>
                  <el-col class="视频信息">
                    123万 播放  发布日期： 2021年1月1日 00:00:00
                  </el-col>
                </div>
              </el-col>
            </el-row>
            <div class="video">
              <video-player
                  class="video-player vjs-custom-skin"
                  ref="videoPlayer"
                  :playsinline="true"
                  :options="playerOptions">
              </video-player>
            </div>
          </div>
          <el-row class="荣誉栏">
            <el-col :span="4">
              <i class="el-icon-check" @click="good">9999</i>
            </el-col>
            <el-col :span="4">
              <i class="el-icon-thumb" @click="praise">9999</i>
            </el-col>
            <el-col :span="4">
              <i class="el-icon-star-off" @click="favorite">9999</i>
            </el-col>
            <el-col :span="4">
              <i class="el-icon-share" @click="share">9999</i>
            </el-col>
            <el-col :span="4">
              <i class="el-icon-warning-outline" @click="report">举报</i>
            </el-col>
          </el-row>
          <div class="视频简介">
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item title="视频简介" name="1" >
                <div>这是视频简介</div>
                <div>这是视频简介</div>
              </el-collapse-item>
            </el-collapse>
          </div>
          <div>
            <el-divider class="分割线"></el-divider>
          </div>
          <div>
            <div style="font-size: 20px; margin-left: 30px">
              评论（共456条）
            </div>
            <div class="发表评论">
              <el-input
                  type="textarea"
                  :rows="4"
                  placeholder="请输入评论内容"
                  v-model="input">
              </el-input>
                <el-button type="primary" style="margin-top: 10px;margin-left: 90%">发表</el-button>
            </div>
          </div>
          <div>
            <el-divider class="分割线"></el-divider>
          </div>
          <div class="评论区">
            <div class="评论">
              <el-row>
                <el-col :span="4">
                  <el-row style="margin-top: 25px">
                    <el-avatar :size="80" :src="circleUrl"></el-avatar>
                  </el-row>
                  <el-row style="margin-top: 5px;margin-left: 15px">
                    用户名
                  </el-row>
                </el-col>
                <el-col :span="20">
                  <el-row>评论评论评论评论</el-row>
                  <el-row style="margin-top: 125px; margin-left: 550px; color: #909399;">发布于 2021年01月01日 00:00:00</el-row>
                </el-col>
              </el-row>
            </div>
            <div>
              <el-divider class="分割线"></el-divider>
            </div>
            <div class="评论">
              <el-row>
                <el-col :span="4">
                  <el-row style="margin-top: 25px">
                    <el-avatar :size="80" :src="circleUrl"></el-avatar>
                  </el-row>
                  <el-row style="margin-top: 5px;margin-left: 15px">
                    用户名
                  </el-row>
                </el-col>
                <el-col :span="20">
                  <el-row>评论评论评论评论</el-row>
                  <el-row style="margin-top: 125px; margin-left: 550px; color: #909399;">发布于 2021年01月01日 00:00:00</el-row>
                </el-col>
              </el-row>
            </div>
            <div>
              <el-divider class="分割线"></el-divider>
            </div>
            <div class="评论">
              <el-row>
                <el-col :span="4">
                  <el-row style="margin-top: 25px">
                    <el-avatar :size="80" :src="circleUrl"></el-avatar>
                  </el-row>
                  <el-row style="margin-top: 5px;margin-left: 15px">
                    用户名
                  </el-row>
                </el-col>
                <el-col :span="20">
                  <el-row>评论评论评论评论</el-row>
                  <el-row style="margin-top: 125px; margin-left: 550px; color: #909399;">发布于 2021年01月01日 00:00:00</el-row>
                </el-col>
              </el-row>
            </div>
            <div>
              <el-divider class="分割线"></el-divider>
            </div>
            <div class="评论">
              <el-row>
                <el-col :span="4">
                  <el-row style="margin-top: 25px">
                    <el-avatar :size="80" :src="circleUrl"></el-avatar>
                  </el-row>
                  <el-row style="margin-top: 5px;margin-left: 15px">
                    用户名
                  </el-row>
                </el-col>
                <el-col :span="20">
                  <el-row>评论评论评论评论</el-row>
                  <el-row style="margin-top: 125px; margin-left: 550px; color: #909399;">发布于 2021年01月01日 00:00:00</el-row>
                </el-col>
              </el-row>
            </div>
            <div>
              <el-divider class="分割线"></el-divider>
              <el-pagination
                  style="margin-left: 400px; margin-top: 50px"
                  background
                  layout="prev, pager, next"
                  :total="1000">
              </el-pagination>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="作者简介">
          <el-row>
            <el-col :span="9">
              <el-avatar :size="60" :src="circleUrl"></el-avatar>
            </el-col>
            <el-col :span="15">
              <div class="文本-标题">
                aaa
              </div>
              <div class="文本-小-宽间距">
                0 关注 0 粉丝
              </div>
              <div class="文本-小-宽间距">
                作者没有填写个人简介
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</div>
</template>
<style scoped>
.作者简介 {
  background-color: white;
  border: solid 1px #909399;
  border-radius: 8px;
  padding: 20px;
  height: 60px;
  width: 200px;
  margin-top: 100px;
}

.文本-标题 {
  font-size: 20px;
  text-align: left;
}

.视频标题{
  font-size: 30px;
}

.视频信息{
  margin-top: 10px;
  color: #909399;
  font-size: 20px;
}

.文本-小-宽间距 {
  font-size: 12px;
  margin-bottom: 5px;
}

.发表评论{
  margin-top: 10px;
  margin-left: 50px;
  font-size: 20px;
}

.video{
  margin-top: 10px;
  height: 540px;
  width: 960px;
}

.视频简介{
  margin-left: 50px;
  margin-top: 10px;
}

.荣誉栏{margin-left: 50px;
}

.评论{
  margin-left: 70px;
  height: 150px;
}

.背景 {
  background: #f8f7f7;
}

.页眉{
  height: 50px;
  background: #ffffff;
}

.标题 {
  font-size: 24px;
  text-align: center;
  color: red;
  margin-bottom: 8px;
  margin-top: 8px;
  font-weight: bold;
}
.小标题 {
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

.文本框 {
  background: #ffffff;
  border-radius: 8px;
  min-height: 36px;
  padding: 20px;
  margin-bottom: 16px;
  margin-top: 16px;
}

</style>
<script>
  export default {
    data() {
      return {
        src: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
        circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        activeNames: ['1'],
        input:'',
        playerOptions: {
          playbackRates: [0.5, 1.0, 1.5, 2.0], //播放速度
          autoplay: false, //如果true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 导致视频一结束就重新开始。
          preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: "zh-CN",
          aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [
            {
              type: "video/mp4",
              src: require("../assets/video.mp4"), //视频url地址
            },
          ],
          poster: require("../assets/logo.png"), //你的封面地址
// width: document.documentElement.clientWidth,
          notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true, //全屏按钮
          }
        }
      };
    },
    methods: {
      handleChange(val) {
        console.log(val);
      },
      good() {
        this.$message({
          message: '点赞成功',
          type: 'success'
        });
      },
      praise() {
        this.$confirm('是否赞赏？', '确认', {
          confirmButtonText: '确定',
          cancelButtonText: '返回',
        }).then(() => {
          this.$message({
            type: 'success',
            message: '作者已收到您的赞赏!'
          });
        })
      },
      favorite() {
        this.$confirm('是否添加到收藏夹？', '确认', {
          confirmButtonText: '确定',
          cancelButtonText: '返回',
        }).then(() => {
          this.$message({
            type: 'success',
            message: '已添加至收藏夹!'
          });
        })
      },
      share() {
        this.$confirm('分享至哪里？', '分享', {
          confirmButtonText: '微信',
          cancelButtonText: 'QQ',
        })
      },
      report() {
        this.$prompt('请输入举报原因', '举报', {
          confirmButtonText: '提交',
          cancelButtonText: '返回'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '已收到您的举报！'
          });
        })
      }
    }
  }
</script>